<template>
  <div class="app" v-if="isShowHomePageFlag">
    <el-row type="flex" justify="space-between">
      <el-col :span="14">
        <el-tabs v-model="activeTab" type="border-card">
          <el-tab-pane v-for="tab in tabs" :key="tab" :label="tab" :name="tab">
            <el-table
              :data="filteredCourses"
              style="width: 100%; height: 500px"
              @selection-change="handleSelectionChange"
            >
              <el-table-column type="selection" width="50" align="center" />
              <el-table-column prop="course" label="课程" />
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-col>
      <el-col :span="10">
        <div class="right-panel">
          <div class="audio-import">
            <h3>错题导入区</h3>
            <el-button
              type="primary"
              @click="handlePreview"
              style="margin-top: 10px; width: 150px"
              >错题导入</el-button
            >
            <div class="el-upload__tip" slot="tip">只能上传zip文件</div>
            <el-button
              type="primary"
              @click="viewExample"
              style="margin-top: 20px; width: 150px"
              >查看示例文件</el-button
            >
          </div>
          <div class="audio-import">
            <h3>错题操作区</h3>
            <el-button
              type="primary"
              @click="openSpeedSetting"
              style="margin-top: 10px; width: 150px"
              >全局播放速度设置</el-button
            >
            <div class="el-upload__tip" slot="tip"></div>
            <el-button
              type="primary"
              @click="playFile"
              style="margin-top: 10px; width: 150px"
              >播放选中错题集</el-button
            >
            <div class="el-upload__tip" slot="tip"></div>
            <el-button
              type="primary"
              @click="handleRemove"
              style="margin-top: 20px; width: 150px"
              >删除文件</el-button
            >
          </div>
        </div>
      </el-col>
    </el-row>
    <el-pagination
      background
      layout="prev, pager, next"
      :total="totalCourses"
      :page-size="pageSize"
      :current-page.sync="currentPage"
      style="margin-top: 20px; text-align: center"
    />
  </div>
  <UploadFiles
    v-else-if="isShowUploadFileFlag"
    :isVisible="isShowUploadFileFlag"
    @close-upload-dialog="handleCloseUploadDialog"
    @cancle-upload="handleCancleUpload"
  />
  <ShowExampleFiles
    v-else-if="isShowExampleFileFlag"
    :isVisible="isShowExampleFileFlag"
    @close-example="handleCloseExample"
  />
  <CreatWrongFile
    v-else-if="iscreatWrongFileFlag"
    :isVisible="iscreatWrongFileFlag"
    @close-create-wrong-file="handleCloseCreatWrongFile"
    @submit-creat-wrong-file="handleSubmitCreatWrongFile"
  />
  <SetPlayerSpeed
    v-else-if="isShowSpeedSettingFlag"
    :isVisible="isShowSpeedSettingFlag"
    :initialSpeed="globalSpeed"
    @speed-set="handleSpeedSet"
    @update:isVisible="isShowSpeedSettingFlag = $event"
  />
  <Showaudioplayer
    v-else-if="isShowAudioPlayerFlag"
    :isVisible="isShowAudioPlayerFlag"
    :initialSpeed="globalSpeed"
    @close-play-file="handleClosePlayer"
  />
</template>

<script>
import UploadFiles from "./uploadfiles.vue"; //导入上传文件的组件
import ShowExampleFiles from "./showexamplefiles.vue"; //导入展示示例文件的组件
import CreatWrongFile from "./creatWrongFile.vue"; //导入创建生成错题集的组件
import SetPlayerSpeed from "./setPlayerSpeed.vue"; //导入设置播放器速度的组件
import Showaudioplayer from "./showaudioplayer.vue"; //导入音频播放器的组件
export default {
  components: {
    UploadFiles,
    ShowExampleFiles, //导入展示示例文件的组件
    CreatWrongFile, //导入创建生成错题集的组件
    SetPlayerSpeed, //导入设置播放器速度的组件
    Showaudioplayer, //导入音频播放器的组件
  },
  data() {
    return {
      activeTab: "初中英语",
      tabs: ["初中英语", "中考真题", "高中英语", "高考真题", "CET4", "CET6"],
      courses: [
        { course: "七年级-第一单元测试-听力错题集合" },
        { course: "七年级-第二单元测试-听力错题集合" },
        { course: "七年级-第三单元测试-听力错题集合" },
        { course: "七年级-第四单元测试-听力错题集合" },
        { course: "七年级-第五单元测试-听力错题集合" },
        { course: "八年级-第一单元测试-听力错题集合" },
        { course: "八年级-第二单元测试-听力错题集合" },
        { course: "八年级-第三单元测试-听力错题集合" },
        { course: "八年级-第四单元测试-听力错题集合" },
        { course: "八年级-第五单元测试-听力错题集合" },
        { course: "八年级-第六单元测试-听力错题集合" },
        { course: "八年级-第七单元测试-听力错题集合" },
        { course: "八年级-第八单元测试-听力错题集合" },
        { course: "八年级-第九单元测试-听力错题集合" },
        { course: "八年级-第十单元测试-听力错题集合" },
      ],
      currentPage: 1,
      pageSize: 10,
      fileList: [],
      selectedCourses: [], // 选中的课程
      //首页是否展示
      isShowHomePageFlag: true,
      //是否展示上传文件页
      isShowUploadFileFlag: false,
      //是否展示示例文件页
      isShowExampleFileFlag: false,
      //是否展示音频播放器页
      isShowAudioPlayerFlag: false,
      //是否展示手动设置锚点页
      isShowManualPointsFlag: false,
      //是否展示智能识别锚点页
      isShowAutoPointsFlag: false,
      //是否显示生成错题集页
      iscreatWrongFileFlag: false,
      // 是否显示全局播放速度设置界面
      isShowSpeedSettingFlag: false,
      // 全局播放速度，默认值为1.0
      globalSpeed: 1.0,
    };
  },
  computed: {
    filteredCourses() {
      return this.courses.slice(
        (this.currentPage - 1) * this.pageSize,
        this.currentPage * this.pageSize
      );
    },
    totalCourses() {
      return this.courses.length;
    },
  },
  methods: {
    /**
     * 功能：上传文件
     * @param {*} file
     */
    handlePreview(file) {
      // 隐藏当前页面，显示 UploadFiles 组件
      this.isShowHomePageFlag = false;
      this.isShowUploadFileFlag = true;
    },
    /**
     * 删除文件
     * 当用户从文件列表中移除文件时，此函数会被调用
     * 它主要用于执行与文件移除相关的操作，并记录相关信息
     *
     * @param {Object} file - 被移除的文件对象，包含文件的相关信息
     * @param {Array} fileList - 文件列表，包含所有未被移除的文件对象
     */
    handleRemove() {
      console.log("Remove:");
      if (this.selectedCourses.length === 0) {
        this.$message({
          type: "warning",
          message: "请选择要删除的文件",
        });
        return;
      }
      this.$confirm("请确认是否删除选中的文件?", "提示", {
        confirmButtonText: "确认",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.selectedCourses.forEach((course) => {
            const index = this.courses.indexOf(course);
            if (index !== -1) {
              this.courses.splice(index, 1);
            }
          });
          this.selectedCourses = []; // 清空选中的课程
          this.$message({
            type: "success",
            message: "删除成功",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    /**
     * 查看示例
     */
    viewExample() {
      console.log("View example file");
      this.isShowHomePageFlag = false;
      this.isShowExampleFileFlag = true;
    },
    /**
     * 播放文件功能
     *
     * 此函数用于触发文件的播放操作它当前没有输入参数，也不直接返回任何值
     * 主要目的是响应用户操作或其他触发条件，执行文件播放逻辑
     */
    playFile() {
      console.log("Play file");
      this.isShowHomePageFlag = false;
      this.isShowAudioPlayerFlag = true;
    },
    /**
         * 删除文件功能
         * 
         * 此函数用于触发文件的删除操作，它当前没有输入参数，也不直接返回任何值
         * 主要目的是响应用户操作或其他触发条件，执行文件删除逻辑
    
         */
    deleteFile() {
      console.log("Delete file");
    },
    /**
     * 手动设置锚点功能
     *
     * 此函数用于触发锚点的手动设置操作，它当前没有输入参数，也不直接返回任何值
     * 主要目的是响应用户操作或其他触发条件，执行锚点的手动设置逻辑
     */
    setManualPoints() {
      console.log("Set manual points");
      this.isShowHomePageFlag = false;
      this.isShowManualPointsFlag = true;
    },
    /**
         * 智能识别锚点功能
         * 
         * 此函数用于触发锚点的智能识别操作，它当前没有输入参数，也不直接返回任何值
         * 主要目的是响应用户操作或其他触发条件，执行锚点的智能识别逻辑
    
         */
    recognizePoints() {
      console.log("Recognize points");
      this.isShowHomePageFlag = false;
      this.isShowAutoPointsFlag = true;
    },
    /**
     * 上传文件成功后关闭上传文件对话框，并显示首页
     */
    handleCloseUploadDialog() {
      this.isShowUploadFileFlag = false;
      // this.isShowHomePageFlag = true;
      this.iscreatWrongFileFlag = true;
    },
    /**
     * 取消上传文件对话框，并显示首页
     */
    handleCancleUpload() {
      this.isShowUploadFileFlag = false;
      this.isShowHomePageFlag = true;
    },
    /**
     * 关闭示例文件对话框，并显示首页
     */
    handleCloseExample() {
      this.isShowExampleFileFlag = false;
      this.isShowHomePageFlag = true;
    },
    /**
     * 关闭播放对话框，并显示首页
     */
    handleClosePlayer() {
      this.isShowAudioPlayerFlag = false;
      this.isShowHomePageFlag = true;
    },
    /**
     * 关闭手动设置锚点对话框，并显示首页
     */
    handleCloseManuallyanchorpoints() {
      this.isShowManualPointsFlag = false;
      this.isShowHomePageFlag = true;
    },
    /**
     * 关闭智能识别锚点对话框，并显示首页
     */
    handleCloseAutoanchorpoints() {
      this.isShowAutoPointsFlag = false;
      this.isShowHomePageFlag = true;
    },
    /*
     * 处理选择变化
     * @param {Array} selected - 选中的课程数组
     */
    handleSelectionChange(selected) {
      this.selectedCourses = selected;
    },
    /**
     * 关闭创建错题文件功能
     */
    handleCloseCreatWrongFile() {
      this.iscreatWrongFileFlag = false;
      this.isShowHomePageFlag = true;
    },
    /**
     * 提交创建错题文件功能
     */
    handleSubmitCreatWrongFile() {
      this.iscreatWrongFileFlag = false;
      this.isShowHomePageFlag = true;
    },
    /**
     * 打开全局播放速度设置界面
     */
    openSpeedSetting() {
      console.log("Open speed setting");
      this.isShowHomePageFlag = false;
      this.isShowSpeedSettingFlag = true;
    },
    /**
     * 处理全局播放速度设置
     * @param {Number} speed - 设置的播放速度
     */
    handleSpeedSet(speed) {
      this.isShowHomePageFlag = true;
      this.isShowSpeedSettingFlag = false;
      this.globalSpeed = speed;
      this.$message({
        type: "success",
        message: `全局播放速度已设置为 ${speed}x`,
      });
    },
  },
};
</script>

<style scoped>
.app {
  padding: 20px;
}

.right-panel {
  border-left: 1px solid #ebeef5;
  padding-left: 20px;
}

.audio-import,
.file-operation {
  margin-top: 40px;
  margin-bottom: 20px;
}

h3 {
  margin-bottom: 10px;
}

.button-group {
  display: flex;
  flex-direction: column;
  /* align-items: flex-start; */
}

.button-group el-button {
  margin-top: 50px;
  /* width: 100%; */
}
</style>
